import { createSlice } from '@reduxjs/toolkit';

export const deviceEnum = [
    {
        name: 'iPhone 8',
        width: 375,
        height: 667,
    },
    {
        name: 'iPhone 8 Plus',
        width: 416,
        height: 739,
    },
    {
        name: 'iPhoneX',
        width: 377,
        height: 814,
    },
    {
        name: 'iPhoneXR',
        width: 416,
        height: 898,
    },
    {
        name: 'HUAWEI Mate 30 Pro',
        width: 394,
        height: 802,
    },
    {
        name: 'Nexus 5',
        width: 362,
        height: 642,
    },
    {
        name: 'Galaxy S8',
        width: 362,
        height: 742,
    }
]

export const scaleEnum = [0.5, 0.6, 0.7, 0.8, 0.9, 1.0, 1.2, 1.5, 2.0];

export const slice = createSlice({
    name: 'layout',
    initialState: {
        device: deviceEnum[0],
        scale: scaleEnum[5],
    },
    reducers: {
        changeDevice: (state, action) => {
            console.log(action.payload, deviceEnum[action.payload]);
            state.device = deviceEnum[action.payload]
        },
        changeScale: (state, action) => {
            console.log(action.payload, scaleEnum[action.payload]);
            state.scale = scaleEnum[action.payload]
        },
    },
});

export const { changeDevice, changeScale } = slice.actions;

export default slice.reducer;